<template>
	<view>
		<web-view ref="webview" :src="url" @message="getMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'http://111.229.202.101'
			}
		},
		onLoad(options) {
			if (options && options.url) {
				this.url = options.url;
			}
		},
		methods: {
			getMessage(event) {
				uni.showModal({
					content: JSON.stringify('recive msg: ' + JSON.stringify(event)),
					showCancel: false
				});
				console.log('event.detail.data: ' + JSON.stringify(event.detail))
				
				var downloadTask = uni.downloadFile({
					url: event.detail.data[0].url,
					success: (data) => {
						console.log("success ====" + JSON.stringify(data))
						uni.saveFile({
							tempFilePath: data.tempFilePath, //临时路径
							success: function(res) {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '文件已保存：' + res.savedFilePath, //保存路径
									duration: 3000,
								});
								
							},
							fail: function(rej) {
								console.log('failed.' + JSON.stringify(rej))
							}
						});
						
						uni.hideLoading();
					},
					fail: (err) => {
						console.log('downloadFile fail, err is:', JSON.stringify(err))
					}
				})
				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					
					// this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
					this.$refs.webview.evalJs("localStorage.setItem('progress',res.progress)");
				});
			}
		}
	}
</script>

<style>

</style>
